<template>
  <div class="goods-sku">
    <dl v-for="(spec, index) in goods.specs" :key="index">
      <dt>{{ spec.name }}</dt>
      <dd>
        <div v-for="btnObj in spec.values" :key="btnObj.name">
          <template>
             <img :class="{ selected: btnObj.selected }"  @click="changeSku(btnObj, spec)" v-if="btnObj.picture" :src="btnObj.picture" alt="">
          <span :class="{ selected: btnObj.selected }" @click="changeSku(btnObj, spec)"  v-else>{{ btnObj.name }}</span>
          </template>

        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => ({ specs: [], skus: [] })
    }
  },
  setup () {
    const changeSku = (btnObj, spec) => {
      if (btnObj.selected) {
        btnObj.selected = false
      } else {
        // 点亮自己，先干掉所有人
        spec.values.forEach(bt => {
          bt.selected = false
        })
        btnObj.selected = true
      }
    }
    return {
      changeSku
    }
  }
}
</script>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
